import React from "react";
import {Slider, InputNumber} from "antd";
import CommonFlex from "../CommonFlex/index";
import "./index.less";

type SLIDE  = {
    label: string; // 标题文本
    type: string;
    value: number;
}
interface Props {
    slide: SLIDE;
    onChange: (value: number) => void
};

const LabeSlideFlex = (props: Props) => {
    const {slide, onChange} = props;
    const handleChange = (newValue: number) => {
        onChange(newValue);
    };
    return (
        <CommonFlex>
            {slide.label}
            <div className="slide-flex-box">
                <div className="slide-flex-option">
                    <Slider  
                        onChange={handleChange}
                        value={typeof slide.value === "number" ? slide.value : 0} 
                        min={0} max={100}
                    />
                </div>
                <div className="slide-flex-input">
                    <InputNumber 
                        controls={true} 
                        min={0} 
                        max={100}
                        value={slide.value}
                        onChange={handleChange}
                    />
                </div>
            </div>
        </CommonFlex>
    );
};
export default LabeSlideFlex;